<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="list.css">
    <link rel="stylesheet" href="reset.css">
    <style>
        #template {
            display: none;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="nav-center">
            <div class="cy">
                <img src="img/cy.png" alt="">
                <span>网络全案营销服务提供商</span>
            </div>
            <ul>
                <li>网站首页</li>
                <li>传悦资源</li>
                <li>传悦案例</li>
                <li>传悦服务</li>
                <li>解决方案</li>
                <li>需求提交</li>
            </ul>
            <div class="talk">
                <span><img src="img/tel.jpg" alt=""></span>
                <span>0934-234567</span>
                <span><img src="img/qq.jpg" alt=""></span>
                <span><img src="img/wb.jpg" alt=""></span>
                <span><img src="img/weixin.png" alt=""></span>
                <span><img src="img/youxiang.jpg" alt=""></span>
            </div>
        </div>
    </div>
    <div class="bg">
        <div class="opc">
            <div class="opc-center">
                <span>网站首页 ></span>
                <span>传悦案列</span>
            </div>
        </div>
    </div>
    <div class="center-bg">
        <div class="center-nav">
            <ul class="first">
                <li class="selected">全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全案</li>
            </ul>
            <ul class="last" id="ul">
                <li id="template">
                    <a href="details.html">
                        <img src="" alt="">
                        <span>众德集团 网站建设</span>
                        <p>网站建设 品牌形象 整合营销 影响销售</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>

    <script src="jquery.min.js"></script>
    <script>
        let http = new XMLHttpRequest();
        http.open('get', "http://10.35.170.196:81/getNewsList")
        http.send()
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                let data = JSON.parse(http.responseText);
                let template = $("#template");
                let ul = $("#ul");
                data.forEach(item => {
                    let newLi = template.clone();
                    newLi.attr("id", "");
                    newLi.find("a").attr("href", `details.html?id=${item.id}`);
                    newLi.find("img").attr("src", item.img);
                    newLi.find("span").html(item.title);
                    newLi.find("p").html(item.txt);
                    newLi.appendTo(ul);
                })
            }
        }
    </script>
</body>

</html>